<template>
	<view class="contain">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="fiexd-top">
			<view class="headerBox">
				<view class="top">
					<view class="search-box">
						<!-- 搜索框 -->
						<!-- 	<view class="input-box">
							<view class="select-box">
								   <picker @change="bindPickerChange"  mode = selector :value="index" :range="array">
								   <view class="uni-input">{{array[index]}}</view>
								    </picker>								
							</view>
							<view class="icon">
								<image src="../../static/images/tb_search.png" mode="aspectFit"></image>
							</view>
							<input placeholder="请输入关键词..." placeholder-style="color:#999;" />

						</view> -->
					</view>
					<view class="icon-box">
						<view class="user">
							<image src="../../static/images/tb_user.png" mode="aspectFit"></image>
						</view>
						<view class="set" @tap="$open('../my/setting')">
							<image src="../../static/images/tb_set.png" mode="aspectFit"></image>
						</view>

					</view>
				</view>

				<view class="tabList">
					<view class="tab-item">
						<view class="pic" @click="pic">
							<image src="../../static/images/tb_scan.png" mode="aspectFit"></image>
						</view>
						<view class="text">扫一扫</view>
					</view>
					<view class="tab-item" @click="gobli">
						<view class="pic">
							<image src="../../static/images/tb_order.png" mode="aspectFit"></image>
						</view>
						<view class="text">开单</view>
					</view>
					<view class="tab-item" @tap="$open('../goods/productInfo')">
						<view class="pic">
							<image src="../../static/images/tb_goods.png" mode="aspectFit"></image>
						</view>
						<view class="text">上货</view>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 444upx;"></view>
		<view class="numberBox">
			<view class="number-item" @click="Godeal">
				<view class="name">
					<image src="../../static/images/icon01.png" mode="aspectFit"></image>
					今日交易额
				</view>
				<view class="text">￥{{trade_sum}}</view>
			</view>
			<view class="number-item" @tap="$open('indent',1)">
				<view class="name">
					<image src="../../static/images/icon02.png" mode="aspectFit"></image>
					今日开单数
				</view>
				<view class="text">{{bill_num}} 单</view>
			</view>
			<view class="number-item" @tap="$open('exhibit',1)">
				<view class="name">
					<image src="../../static/images/icon03.png" mode="aspectFit"></image>
					当前欠款数
				</view>
				<view class="text">￥{{receivable}}</view>
			</view>
			<view class="number-item" @tap="$open('exhibit',1)">
				<view class="name">
					<image src="../../static/images/icon04.png" mode="aspectFit"></image>
					当前欠货数
				</view>
				<view class="text">{{owe_sum}} 件</view>
			</view>


		</view>
		<!-- 快捷入口 -->
		<view class="homeList">
			<view class="tab-item" @tap="$open('../specification/specification')">
				<view class="pic">
					<image src="../../static/images/tb_icon01.png" mode="aspectFit" style="width: 53upx;height: 49upx;"></image>
				</view>
				<view class="text">规格管理</view>
			</view>
			<view class="tab-item" @tap="$open('deal')">
				<view class="pic">
					<image src="../../static/images/tb_icon02.png" mode="aspectFit" style="width: 47upx;height: 54upx;"></image>
				</view>
				<view class="text">账本</view>
			</view>
			<view class="tab-item" @click="godailynews">
				<view class="pic">
					<image src="../../static/images/tb_icon03.png" mode="aspectFit" style="width: 50upx;height: 54upx;"></image>
				</view>
				<view class="text">日报</view>
			</view>
		<!-- 	<view class="tab-item" @tap="$open('../specification/educe')">
				<view class="pic">
					<image src="../../static/images/tb_icon04.png" mode="aspectFit" style="width: 57upx;height: 54upx;"></image>
				</view>
				<view class="text">数据导出</view>
			</view> -->
			<view class="tab-item" @tap="$open('../specification/SetupShop')">
				<view class="pic">
					<image src="../../static/images/tb_icon05.png" mode="aspectFit" style="width: 56upx;height: 54upx;"></image>
				</view>
				<view class="text">店铺设置</view>
			</view>
			<view class="tab-item" @tap="$open('../goods/classification')">
				<view class="pic">
					<image src="../../static/images/tb_icon06.png" mode="aspectFit" style="width: 51upx; height: 37upx;"></image>
				</view>
				<view class="text">货品分类</view>
			</view>
			<!-- <view class="tab-item" @tap="$open('../specification/finan')"> -->
				<view class="tab-item" @tap="$open('../specification/finan')">
				<view class="pic">
					<image src="../../static/images/tb_icon07.png" mode="aspectFit" style="width: 58upx;height: 54upx;"></image>
				</view>
				<view class="text">金融</view>
			</view>
	<!-- 		<view class="tab-item" @tap="$open('../newShop/index')">
				<view class="pic">
					<image src="../../static/images/tb_icon08.png" mode="aspectFit" style="width: 55upx;height: 54upx;"></image>
				</view>
				<view class="text">商城</view>
			</view> -->
			<!-- 	<view class="tab-item">
				<view class="pic">
					<image src="../../static/images/tb_icon09.png" mode="aspectFit"></image>
				</view>
				<view class="text">商机</view>
			</view> -->
			<view class="tab-item" @tap="$open('../specification/mms')">
				<view class="pic">
					<image src="../../static/images/tb_icon10.png" mode="aspectFit" style="width: 52upx;height: 48upx;"></image>
				</view>
				<view class="text">短信管理</view>
			</view>
			<view class="tab-item" @tap="$open('../specification/manager')">
				<view class="pic">
					<image src="../../static/images/tb_icon11.png" mode="aspectFit" style="width: 51upx;height: 51upx;"></image>
				</view>
				<view class="text">数据管理</view>
			</view>
			<view class="tab-item" @tap="$open('../specification/shoppingMall')">
				<view class="pic">
					<image src="../../static/images/tb_icon12.png" mode="aspectFit" style="width: 48upx;height: 54upx;"></image>
				</view>
				<view class="text">商城设置</view>
			</view>


			<view class="tab-item" @tap="$open('../specification/printer')">
				<view class="pic">
					<image src="../../static/images/tb_icon13.png" mode="aspectFit" style="width: 55upx;height: 54upx;"></image>
				</view>
				<view class="text">打印机</view>
			</view>
			<view class="tab-item" @tap="$open('../specification/preferences')">
				<view class="pic">
					<image src="../../static/images/tb_icon14.png" mode="aspectFit" style="width: 48upx;height: 44upx;"></image>
				</view>
				<view class="text">系统参数</view>
			</view>
	<!-- 		<view class="tab-item" @tap="$open('../distribution/distribution')">
				<view class="pic">
					<image src="../../static/images/xiao.png" mode="aspectFit" style="width: 48upx;height: 44upx;"></image>
				</view>
				<view class="text">我的分销</view>
			</view> -->
		</view>
		<!-- 版本2 -->
	<!-- 	<view class="homeList">
			<view class="homeList_name">
				<text>移动车销</text>
			</view>
			<view class="tab-item" @tap="$open('./stock/stock')">
				<view class="pic">
					<image src="../../static/images/s42.png" mode="aspectFit" style="width: 48upx;height: 44upx;"></image>
				</view>
				<view class="text">查询库存</view>
			</view>
			<view class="tab-item" @tap="$open('./client/client')">
				<view class="pic">
					<image src="@/static/images/s38.png" mode="aspectFit" style="width: 48upx;height: 44upx;"></image>
				</view>
				<view class="text">客户</view>
			</view>
			<view class="tab-item" @tap="$open('../shop/collection/collection')">
				<view class="pic">
					<image src="../../static/images/s43.png" mode="aspectFit" style="width: 48upx;height: 44upx;"></image>
				</view>
				<view class="text">查应收</view>
			</view>
		</view> -->
		<!-- 版本三 -->
		<!-- <view class="homeList" style="padding-bottom: 400rpx;">
			<view class="homeList_name">
				<text>销售外勤</text>
			</view>
			<view class="tab-item" @tap="$open('../shop/sign/sign')">
				<view class="pic">
					<image src="../../static/images/s44.png" mode="aspectFit" style="width: 48upx;height: 44upx;"></image>
				</view>
				<view class="text">签到</view>
			</view>
			<view class="tab-item" @tap="$open('./clients/client')">
				<view class="pic">
					<image src="../../static/images/s40.png" mode="aspectFit" style="width: 48upx;height: 44upx;"></image>
				</view>
				<view class="text">客户分布</view>
			</view>
			<view class="tab-item" @tap="$open('./visit/visit')">
				<view class="pic">
					<image src="../../static/images/s39.png" mode="aspectFit" style="width: 48upx;height: 44upx;"></image>
				</view>
				<view class="text">客户拜访</view>
			</view>
			
			<view class="tab-item" @click="$open('../shop/location/location')">
				<view class="pic">
					<image src="../../static/images/s41.png" mode="aspectFit" style="width: 48upx;height: 44upx;"></image>
				</view>
				<view class="text">职员定位</view>
			</view> -->
		</view>	
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				array: ['客户', '库存'],
				pict: '',
				trade_sum: '',
				bill_num: '',
				receivable: '',
				owe_sum: '',
				specList: []

			};
		},
		onLoad() {
			this.showPic()
		
			this.specList = uni.setStorageSync('specList', this.specList);
		},
		onShow() {
			uni.removeStorage({
			    key: 'storage_key',
			    success: function (res) {
			        console.log('success');
			    }
			});
				this.showMoney()
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			Godeal() {
				uni.navigateTo({
					url: 'deal'
				});
			},
			godailynews() {
				uni.navigateTo({
					url: './daily/dailynews'
				});
			},
			pic() {
				uni.switchTab({
					url: 'client'
				})
			},
			showPic() {
				this.$ajax('api/v2.goods/index', {

				}).then((res) => {

				}).catch(res => {
					console.log(Error);
				})
			},
			showMoney() {
				this.$ajax('api/v1.shop/daily', {}, 'GET').then(res => {
					// console.log(res);
					const {
						trade_sum,
						bill_num,
						receivable,
						owe_sum
					} = res.result;
					this.trade_sum = trade_sum;
					this.bill_num = bill_num;
					this.receivable = receivable;
					this.owe_sum = owe_sum
				});
			},
			gobli() {
				uni.navigateTo({
					url: '../order/billing?item=' + JSON.parse(-5)
				})
			},
		
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F4F8;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #fff;
		top: 0;
		z-index: 999;
	}

	.fiexd-top {
		width: 100%;
		position: fixed;
		z-index: 99999;
	}

	.headerBox {
		height: 390upx;
		background: url(../../static/images/top_bg.jpg) no-repeat center;
		background-size: 100% 100%;
		padding-top: 55upx;

		.top {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 30upx;

			.input-box {
				width: 555upx;
				height: 60upx;
				line-height: 60upx;
				border-radius: 30upx;
				background-color: #fff;
				position: relative;
				display: flex;
				flex-direction: row;

				input {
					width: 100%;
					height: 60upx;
					line-height: 60upx;
					font-size: 28upx;
					color: #999;
					padding: 0 15upx;
				}

				.select-box {
					cursor: pointer;
					margin-right: 30upx;
					picker {
						height: 60upx;
						line-height: 60upx;
						font-size: 28upx;
						color: #333;
						width: 120upx;
						outline: none;
						border: none;
						/*去掉默认的下拉三角*/
						appearance: none;
						-moz-appearance: none;
						-webkit-appearance: none;
						/*添加下拉三角图标*/
						background: url("../../static/images/tb_down.png") no-repeat right center transparent;
						background-size: 17upx 10upx;
						padding-left: 30upx;

						uni-input {
							font-size: 30upx;

						}

					}

				}

				.icon {
					image {
						width: 30upx;
						height: 30upx;
					}
				}
			}

			.avatar {
				image {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
				}
			}

			.icon-box {
				display: flex;
				flex-direction: row;
				width: 100%;
				justify-content: space-between;
				margin-left: 20upx;

				.user {
					margin-right: 20upx;

					image {
						width: 48upx;
						height: 44upx;
					}

				}

				.set {
					image {
						width: 44upx;
						height: 44upx;
					}
				}
			}
		}

		.tabList {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-top: 100upx;

			.tab-item {
				width: 33.333%;
				margin: auto;
				text-align: center;


				.pic {
					margin-bottom: 25upx;

					image {
						width: 100%;
						height: 70upx;
						vertical-align: middle;
					}
				}

				.text {
					font-size: 32upx;
					color: #fff;
				}

			}
		}
	}

	.numberBox {
		background-color: #FFFFFF;
		overflow: hidden;

		.number-item {
			width: 49.8%;
			float: left;
			border-top: 1upx #F0F0F0 solid;
			padding: 30upx 0 30upx 0;

			&:nth-child(2n+2) {
				border-left: 1upx #F0F0F0 solid;
			}

			&:nth-child(2) {
				.text {
					color: #F49937;
				}
			}

			&:nth-child(3) {
				.text {
					color: #0082E8;
				}
			}

			&:nth-child(4) {
				.text {
					color: #079F3D;
				}
			}

			.name {
				display: flex;
				flex-direction: row;
				margin-bottom: 25upx;
				font-size: 30upx;
				color: #333;
				padding-left: 30upx;

				image {
					width: 44upx;
					height: 44upx;
					margin-right: 20upx;
					vertical-align: middle;
				}

			}

			.text {
				font-size: 30upx;
				color: #DB5646;
				padding-left: 30upx;
			}
		}
	}

	// 快捷入口
	.homeList {
		width: 100%;
		background-color: #fff;
		overflow: hidden;
		margin: 20upx 0 0upx 0;
		border: 1upx #F0F0F0 solid;
		border-right: none;
		border-left: none;

		.tab-item {
			width: 24.7%;
			float: left;
			text-align: center;
			padding: 50upx 0 40upx 0;
			border-right: 1upx #F0F0F0 solid;
			border-bottom: 1upx #F0F0F0 solid;

			&:nth-child(4n+4) {
				border-right: none;
			}

			.pic {
				height: 54upx;
				margin-bottom: 20upx;

				image {
					width: 100%;
					height: 54upx;
					vertical-align: middle;
				}
			}

			.text {
				font-size: 30upx;
				color: #333;
			}
		}
	
		// 版本2
		.homeList_name{
			border-bottom: 1px solid #F5F5F5;
			padding:19rpx 30rpx;
			text{
				font-size: 30rpx;
				
			}
		}
	}
</style>
